<template>
	<view>
		<!-- tab栏 -->
		<uniNavBar :border="false" fixed statusBar>
			<view class="flex justify-center align-center w-100">
				<view class="mx-1 text-light-muted font-md  font-weight-bold"
					:class="tabIndex === index ? 'font-lg text-main' :''" v-for="(item,index) in tabbars" :key="index"
					@click="changeTab(index)">
					{{item.name}}
				</view>
			</view>
			<view slot="right" hover-class="text-main" @click="handleAddIpt">
				<text class="iconfont icon-fatie_icon font-md"></text>
			</view>
		</uniNavBar>
		<!-- 关注列表 -->
		<swiper :current="tabIndex" :duration="1000" :style="'height:'+scrollH+'px'" @change="onChangetab">
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="scrolltolower">
					<block v-for="(item,index) in list" :key="index">
						<commonList :item="item" :index="index" @dosupport="dosupport"></commonList>
						<divider></divider>
					</block>
					<loadMore :loadMore="loadMore" v-show="list.length"></loadMore>
					<nothing v-if="showNo"></nothing>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px'" @scrolltolower="scrolltolower">
					<!-- 热门分类 -->
					<hotCate :hotCate="hotCate"></hotCate>
					<!-- 搜索框 -->
					<view class="p-2">
						<view class="flex justify-center align-center py-2 bg-light border rounded text-secondary"
							@click="open">
							<text class="iconfont icon-sousuo mr-2"></text>搜索话题
						</view>
					</view>
					<!-- swiper -->
					<swiper class="px-2 pb-2" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in imagesList" :key="item.id">
							<image :src="item.src" style="height: 300rpx;" class="w-100 rounded"></image>
						</swiper-item>
					</swiper>
					<divider></divider>
					<!-- 最近更新 -->
					<view class="p-2 font-md">
						最近更新
					</view>
					<!-- 话题列表 -->
					<block v-for="(item,index) in topicList">
						<topicLst :item="item" :index="index"></topicLst>
					</block>
				</scroll-view>
			</swiper-item>

		</swiper>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import commonList from '@/components/common/common-list.vue'
	import loadMore from '@/components/common/loadmore.vue'
	import hotCate from '@/components/news/hot-cate.vue'
	import topicLst from "@/components/news/topic-list.vue"
	export default {
		components: {
			uniNavBar,
			commonList,
			loadMore,
			hotCate,
			topicLst
		},
		data() {
			return {
				//默认选中关注
				tabIndex: 0,
				tabbars: [{
						name: '关注'
					},
					{
						name: '话题'
					}
				],
				//滚动区域高度
				scrollH: 600,
				//关注也列表数据
				list: [],
				page:1,
				loadMore: '上拉加载更多',
				hotCate: [],
				topicList: [],
				imagesList: [],
				showNo:false
			}
		},
		onLoad() {
			// uni.getSystemInfo({
			// 	success(res) {
			// 		this.scrollH = res.windowHeight - res.statusBarHeight - 44
			// 	}
			// })
			this.getTopicNav()
			this.getHotTopic()
			this.getSwipers()
			uni.$on('updateFolloworSurpport',(e) => {
				switch (e.type){
					case 'support':
					this.dosupport(e.data)
						break;
					default:
						break;
				}
			})
		},
		onShow() {
			this.page = 1
			this.getFollow()
		},
		methods: {
			//获取关注列表
			getFollow() {
				uni.showLoading({
					title: '加载中',
					mask: false
				});
				let isrefensh = this.page === 1
				this.$H.get('/followpost/' + this.page, {}, {
					token: true,
					notoast:true
				}).then(res => {
					let list = res.list.map( v=> {
						return this.$U.formatCommonList(v)
					})
					uni.hideLoading()
					list.length ? this.showNo = false : this.showNo = true
					this.list = isrefensh ? list: [...this.list,...list]
					this.loadMore = list.length < 10 ? '没有更多了' :'上拉加载更多'
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			//获取话题分类
			getTopicNav() {
				this.$H.get('/topicclass').then(res => {
					this.hotCate = res.list.map(v => {
						return {
							id: v.id,
							name: v.classname
						}
					})
				})
			},
			getHotTopic() {
				this.$H.get('/hottopic').then(res => {
					this.topicList = res.list.map(v => {
						return {
							id: v.id,
							cover: v.titlepic,
							title: v.title,
							desc: v.desc,
							today_count: v.todaypost_count,
							news_count: v.post_count
						}
					})
				})
			},
			getSwipers() {
				this.$H.get('/adsense/0').then(res => {
					this.imagesList = res.list
				})
			},
			//切换tab
			changeTab(index) {
				this.tabIndex = index
			},
			//发布动态
			handleAddIpt() {
				this.navigateTo({
					url: '../add-input/add-input',
				});
			},
			//滑动swiper对应tab栏
			onChangetab(e) {
				this.tabIndex = e.detail.current
			},
			//顶和踩操作
			dosupport(e) {
				console.log(e)
				this.list.forEach( item => {
					if(item.id === e.id){
						if (item.support.type === 'support' && e.type === 'unsupport') {
							item.support.support_count--
							item.support.unsupport_count++
						} else if (item.support.type === 'unsupport' && e.type === 'support') {
							item.support.support_count++
							item.support.unsupport_count--
						} else if (item.support.type === '') {
							item.support.type = e.type
							item.support[e.type + '_count']++
						}
						item.support.type = e.type
					}
				})
				uni.showToast({
					title: e.type === 'support' ? '已支持':'已反对',
					icon: 'none'
				});
			},
			//滚动区域触底事件
			scrolltolower() {
				if (this.loadMore !== '上拉加载更多') {
					return
				}
				this.loadMore = '加载中...'
				this.page ++
				this.getFollow()

			},
			open() {
				uni.navigateTo({
					url: '../search/search?type=topic',
				});
			}
		}
	}
</script>

<style>

</style>
